<template>
  <cs-container :is-back-to-top="true">
    <el-row>
      <el-col :span="5">
        <div class="container treeContent">
          <page-left @handleTreeClick="handleTreeClick"/>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="container mainContent">
          <page-main :searchParams="treeClickData"/>
        </div>
      </el-col>
    </el-row>
  </cs-container>
</template>

<script>
export default {
  name: 'index1',
  data() {
    return {
      treeClickData: '默认'
    }
  },
  components: {
    'PageLeft': () => import('./components/PageLeft'),
    'PageMain': () => import('./components/PageMain')
  },
  methods: {
    handleTreeClick(data) {
      if (!data.children) {
        this.treeClickData = data.groupName
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 10px;
  /* border-radius: 5px; */
  height: 100%;
}
.treeContent {
  background: #e0e4ea;
}
.mainContent {
  background: #f2f2f2;
}
.el-row {
  height: 100%;
  padding: 5px;
  /* display: flex;
  justify-content: space-around; */
}
.el-col {
  height: 98%;
}
</style>
